import { resolveAssetImage } from "@/utils/common"
import styled from "@emotion/styled"
import { FC } from "react"
import { TStatus } from "../types/transaction"

const StatusText = styled.div`
    font-weight: 500;
    font-size: 16rem;
    line-height: 24rem;
    text-align: center;
`

const AmountUnit = styled.span`
    font-weight: 600;
    font-size: 24rem;
    line-height: 36rem;
    text-align: center;
`

const AmountText = styled.div`
    font-size: 36rem;
    color: #000;
    font-weight: 700;
    line-height: 44rem;
`

const StatusWrapper = styled.div`
    text-align: center;
    width: 375rem;
    height: 375rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 170rem;
    margin: 0 auto;
    position: relative;
    & > img {
        width: 100%;
        height: auto;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
    }
`
const StatusContent = styled.div`
    width: 100%;
    height: 100%;
    position: relative;
`

const statusMap: Record<TStatus, { text: string; image: string }> = {
    [TStatus.Pending]: {
        text: "Pending",
        image: resolveAssetImage("pages/TransactionStatusPage/pending.webp"),
    },
    [TStatus.Success]: {
        text: "Deposit Successful",
        image: resolveAssetImage("pages/TransactionStatusPage/success.webp"),
    },
    [TStatus.Failed]: {
        text: "Deposit Failed",
        image: resolveAssetImage("pages/TransactionStatusPage/fail.webp"),
    },
    [TStatus.UnderReview]: {
        text: "Under Review",
        image: resolveAssetImage("pages/TransactionStatusPage/pending.webp"),
    },
    [TStatus.Paying]: {
        text: "Paying",
        image: resolveAssetImage("pages/TransactionStatusPage/pending.webp"),
    },
    [TStatus.Canceled]: {
        text: "Canceled",
        image: resolveAssetImage("pages/TransactionStatusPage/fail.webp"),
    },
}

export const TransactionStatus: FC<{ amount: string; status: TStatus }> = ({ amount, status }) => {
    const { text, image } = statusMap[status]

    return (
        <StatusWrapper>
            <img
                src={image}
                alt="bg"
            />
            <StatusContent>
                <StatusText>{text}</StatusText>
                <AmountText>
                    <AmountUnit>₱</AmountUnit>
                    {amount}
                </AmountText>
            </StatusContent>
        </StatusWrapper>
    )
}
